<template>
  <div class="personpages">
    <div class="per_title">
      <img :src="icon_head" @click="chooseImg" />
      <div class="per_info">
        <b>{{userInfo.loginName}}</b>
        <p>{{userInfo.telephone}}</p>
      </div>
    </div>
    <ul class="per_list_info">
      <li @click="changeUserName">
        <img src="../assets/images/icon_personal_username.png" />
        <b>姓名</b>
        <p>{{userInfo.name}}</p>
        <!-- <i class="iconfont iconnext" /> -->
      </li>
      <li>
        <img src="../assets/images/icon_personal_cpmpany.png" />
        <b>所在单位</b>
        <p>{{userInfo.orgName}}</p>
      </li>
      <li>
        <img src="../assets/images/icon_personal_role.png" />
        <b>所属角色</b>
        <p>{{userInfo.roleName}}</p>
      </li>
      <li @click="showVersion">
        <img src="../assets/images/icon_personal_about.png" />
        <b>关于</b>
        <p>版本号{{version}}</p>
        <!-- <i class="iconfont iconnext" /> -->
      </li>
      <!-- <li @click="changePassword">
        <img src="../assets/images/icon_personal_serpass.png" />
        <b>修改密码</b>
        <p></p>
        <i class="iconfont iconnext" />
      </li> -->
    </ul>
    <div class="mongolia" v-show="false">
      <div class="mongolia_item">
        <span>拍照</span>
        <span @click="chooseImg">选取照片</span>
        <p>取消</p>
      </div>
    </div>
    <!-- <p class="out_login" @click="outLogin">退出</p> -->
  </div>
</template>

<script>

export default {
  mounted() {
    // window["dsBridge"].register("whetherHtml", function(ret) {
    //   console.log("=======ret:" + ret);
    //   return false;
    // });
  },
  data() {
    return {
      icon_head: require("../assets/images/icon_personal_photo_man.png"),
	  version:require('../../package.json').version
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo;
    }
  },
  methods: {
    outLogin() {
      console.log("========退出登录=====");
      // window.location.href = "gsmdp://foshan.com/main/activity/login?param=1";
       this.$router.replace({ name: "login" });
    },
    chooseImg() {
      let _this = this;
      window.gsmdp.outputLog();
      window.gsmdp.chooseImage({
        key: {
          count: 1,
          sizeType: ["original", "compressed"],
          sourceType: ["album", "camera"]
        },
        success(result) {
          console.log("===success" + JSON.stringify(result));
          console.log(result.tempFiles[0].path);
          window.gsmdp.getLocalImgData({
            localId: result.tempFiles[0].path,
            success: function(res) {
              let localData = res.localData;
              _this.icon_head = localData;
            }
          });
        }
        // fail(err) {
        //   console.log(err);
        // }
      });
    },
    changeUserName() {
      // this.$router.push({ name: "changeUserName" });
    },
    changePassword() {
      this.$router.push({ name: "changePassword" });
    },
    showVersion() {
      // this.$router.push({ name: "showAbort" });
    }
  }
};
</script>

<style lang="stylus" scoped>
.personpages {
  margin-top: -0.68rem;
  background: #F5F6FA;
  height: 100%;
}

.per_title {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 4.5rem;
  padding-left: 1rem;
  background: url('../assets/images/icon_personal_bg.png') #f5f6fa no-repeat;
  background-size: 100% 4.5rem;

  img {
    margin-bottom: 0.5rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
  }
}

.out_login {
  width: 300px;
  background: #FFF;
  margin: 1rem auto;
  color: #474747;
  text-align: center;
  padding: 0.3rem;
}

.per_info {
  display: flex;
  flex-direction: column;
  margin-left: 0.3rem;
  margin-bottom: 0.5rem;

  b {
    font-size: 0.4rem;
    color: white;
  }

  p {
    font-size: 0.25rem;
    color: white;
    margin-top: 0.15rem;
  }
}

.per_list_info {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  margin-top: -1.25rem;
  background: #fff;
  padding: 0.3rem;
  border-radius: 0.2rem;

  li {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    text-align: center;

    img {
      width: 0.6rem;
      height: 0.6rem;
    }

    b {
      margin-left: 0.2rem;
      font-size: 0.3rem;
      color: #3f4046;
      font-weight: 1;
    }

    p {
      font-size: 0.3rem;
      flex: 1;
      text-align: right;
      color: #707070;
      position: flex;
      flex-direction: row;
      align-items: center;
    }

    i {
      margin-left: 0.05rem;
    }
  }
}

.mongolia {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.mongolia_item {
  width: 100%;
  position: absolute;
  display: flex;
  flex-direction: column;
  bottom: 0;
  background: #f5f6fa;

  span {
    text-align: center;
    padding: 0.4rem;
    margin-bottom: 0.03rem;
    background: #FFF;
  }

  p {
    text-align: center;
    padding: 0.4rem;
    background: #FFF;
    margin-top: 0.15rem;
  }
}
</style>
